<template>
  <div class="main-container">
    <!-- 导航栏 -->
    <nav class="navbar">
      <div class="navbar-brand">
        <h1>🏫 高校职工就餐系统</h1>
      </div>
      <div class="navbar-user">
        <div class="user-info">
          <span class="user-avatar">👤</span>
          <span class="user-name">{{ userInfo.username || '未登录' }}</span>
        </div>
        <button class="logout-btn" @click="handleLogout">退出登录</button>
      </div>
    </nav>

    <!-- 主体内容 -->
    <main class="content">
      <!-- 欢迎区域 -->
      <section class="welcome-section">
        <div class="welcome-card">
          <h2>欢迎回来，{{ userInfo.username || '教职工' }}</h2>
          <p>{{ welcomeMessage }}</p>
          <div class="quick-stats">
            <div class="stat-item">
              <span class="stat-value">{{ mealCardBalance }}</span>
              <span class="stat-label">餐卡余额 (元)</span>
            </div>
            <div class="stat-item">
              <span class="stat-value">{{ todayMealsCount }}</span>
              <span class="stat-label">今日已用餐 (次)</span>
            </div>
            <div class="stat-item">
              <span class="stat-value">{{ weeklyMealsCount }}</span>
              <span class="stat-label">本周已用餐 (次)</span>
            </div>
          </div>
        </div>
      </section>

      <!-- 功能模块区域 -->
      <section class="modules-section">
        <h3 class="section-title">功能模块</h3>
        <div class="modules-grid">
          <!-- 今日菜单模块 -->
          <div class="module-card" @click="goToTodayMenu">
            <div class="module-icon">🍽️</div>
            <h4>今日菜单</h4>
            <p>查看各食堂今日供应菜品</p>
          </div>
          
          <!-- 我的餐卡模块 -->
          <div class="module-card" @click="goToMealCard">
            <div class="module-icon">💳</div>
            <h4>我的餐卡</h4>
            <p>管理餐卡信息与余额</p>
          </div>
          
          <!-- 预约就餐模块 -->
          <div class="module-card" @click="goToReservation">
            <div class="module-icon">📅</div>
            <h4>预约就餐</h4>
            <p>提前预约食堂座位</p>
          </div>
          
          <!-- 消费记录模块 -->
          <div class="module-card" @click="goToConsumption">
            <div class="module-icon">📊</div>
            <h4>消费记录</h4>
            <p>查询历史消费明细</p>
          </div>
          
          <!-- 意见反馈模块 -->
          <div class="module-card" @click="goToFeedback">
            <div class="module-icon">💬</div>
            <h4>意见反馈</h4>
            <p>对食堂服务提出建议</p>
          </div>
          
          <!-- 个人设置模块 -->
          <div class="module-card" @click="goToSettings">
            <div class="module-icon">⚙️</div>
            <h4>个人设置</h4>
            <p>修改个人信息与偏好</p>
          </div>
        </div>
      </section>

      <!-- 最新公告区域 -->
      <section class="announcements-section">
        <h3 class="section-title">最新公告</h3>
        <div class="announcements-list">
          <div class="announcement-item" v-for="(announcement, index) in announcements" :key="index">
            <span class="announcement-date">{{ announcement.date }}</span>
            <span class="announcement-title">{{ announcement.title }}</span>
            <span class="announcement-badge" :class="announcement.type">{{ announcement.typeText }}</span>
          </div>
        </div>
      </section>
    </main>

    <!-- 页脚 -->
    <footer class="footer">
      <p>&copy; 2025 高校职工就餐系统 - 技术支持：信息中心</p>
    </footer>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'

export default {
  name: 'HomePage',
  setup() {
    const router = useRouter()
    
    // 用户信息
    const userInfo = ref({
      username: '',
      department: '',
      role: ''
    })
    
    // 餐卡信息
    const mealCardBalance = ref(0)
    const todayMealsCount = ref(0)
    const weeklyMealsCount = ref(0)
    
    // 公告列表
    const announcements = ref([
      { date: '2025-01-15', title: '春节期间食堂开放时间调整通知', type: 'important', typeText: '重要' },
      { date: '2025-01-10', title: '新增特色窗口，欢迎品尝', type: 'normal', typeText: '通知' },
      { date: '2025-01-05', title: '餐卡充值系统维护通知', type: 'maintenance', typeText: '维护' }
    ])
    
    // 欢迎消息
    const welcomeMessage = computed(() => {
      const hour = new Date().getHours()
      if (hour < 12) return '早上好！祝您有个愉快的一天'
      if (hour < 18) return '下午好！工作辛苦了'
      return '晚上好！准备好用晚餐了吗'
    })
    
    // 模拟加载用户数据
    const loadUserData = () => {
      // 从localStorage获取用户信息
      const savedUser = localStorage.getItem('user')
      if (savedUser) {
        userInfo.value = JSON.parse(savedUser)
      } else {
        // 模拟数据
        userInfo.value = {
          username: '张老师',
          department: '计算机学院',
          role: '教师'
        }
      }
      
      // 模拟餐卡数据
      mealCardBalance.value = 258.50
      todayMealsCount.value = 1
      weeklyMealsCount.value = 5
    }
    
    // 处理退出登录
    const handleLogout = () => {
      if (confirm('确定要退出登录吗？')) {
        localStorage.removeItem('user')
        router.push('/login')
      }
    }
    
    // 功能模块跳转
    const goToTodayMenu = () => {
      alert('跳转到今日菜单页面')
      // 实际项目中使用：router.push('/today-menu')
    }
    
    const goToMealCard = () => {
      alert('跳转到我的餐卡页面')
      // 实际项目中使用：router.push('/meal-card')
    }
    
    const goToReservation = () => {
      alert('跳转到预约就餐页面')
      // 实际项目中使用：router.push('/reservation')
    }
    
    const goToConsumption = () => {
      alert('跳转到消费记录页面')
      // 实际项目中使用：router.push('/consumption')
    }
    
    const goToFeedback = () => {
      alert('跳转到意见反馈页面')
      // 实际项目中使用：router.push('/feedback')
    }
    
    const goToSettings = () => {
      alert('跳转到个人设置页面')
      // 实际项目中使用：router.push('/settings')
    }
    
    // 页面加载时获取数据
    onMounted(() => {
      loadUserData()
    })
    
    return {
      userInfo,
      mealCardBalance,
      todayMealsCount,
      weeklyMealsCount,
      welcomeMessage,
      announcements,
      handleLogout,
      goToTodayMenu,
      goToMealCard,
      goToReservation,
      goToConsumption,
      goToFeedback,
      goToSettings
    }
  }
}
</script>

<style scoped>
.main-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f8f9fa;
}

/* 导航栏样式 */
.navbar {
  background-color: #1a73e8;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.navbar-brand h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}

.navbar-user {
  display: flex;
  align-items: center;
  gap: 20px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-avatar {
  font-size: 24px;
}

.user-name {
  font-weight: 500;
}

.logout-btn {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.logout-btn:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

/* 主体内容样式 */
.content {
  flex: 1;
  padding: 30px;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* 欢迎区域样式 */
.welcome-section {
  margin-bottom: 30px;
}

.welcome-card {
  background: linear-gradient(135deg, #1a73e8 0%, #4285f4 100%);
  color: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(26, 115, 232, 0.3);
}

.welcome-card h2 {
  margin: 0 0 10px 0;
  font-size: 28px;
  font-weight: 600;
}

.welcome-card p {
  margin: 0 0 20px 0;
  font-size: 16px;
  opacity: 0.9;
}

.quick-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.stat-item {
  background-color: rgba(255, 255, 255, 0.15);
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}

.stat-value {
  display: block;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  opacity: 0.8;
}

/* 功能模块样式 */
.modules-section {
  margin-bottom: 30px;
}

.section-title {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 20px 0;
  color: #202124;
  border-bottom: 2px solid #1a73e8;
  padding-bottom: 10px;
}

.modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.module-card {
  background: white;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.module-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-color: #1a73e8;
}

.module-icon {
  font-size: 48px;
  margin-bottom: 15px;
  display: block;
  text-align: center;
}

.module-card h4 {
  margin: 0 0 10px 0;
  font-size: 18px;
  font-weight: 600;
  color: #202124;
  text-align: center;
}

.module-card p {
  margin: 0;
  color: #5f6368;
  font-size: 14px;
  text-align: center;
}

/* 公告区域样式 */
.announcements-section {
  margin-bottom: 30px;
}

.announcements-list {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.announcement-item {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s ease;
}

.announcement-item:last-child {
  border-bottom: none;
}

.announcement-item:hover {
  background-color: #f8f9fa;
}

.announcement-date {
  font-size: 14px;
  color: #5f6368;
  margin-right: 20px;
  min-width: 100px;
}

.announcement-title {
  flex: 1;
  font-size: 15px;
  color: #202124;
}

.announcement-badge {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 500;
}

.announcement-badge.important {
  background-color: #ffebee;
  color: #d32f2f;
}

.announcement-badge.normal {
  background-color: #e3f2fd;
  color: #1976d2;
}

.announcement-badge.maintenance {
  background-color: #fff8e1;
  color: #ff8f00;
}

/* 页脚样式 */
.footer {
  background-color: #202124;
  color: #9aa0a6;
  text-align: center;
  padding: 20px;
  margin-top: auto;
}

.footer p {
  margin: 0;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .navbar {
    padding: 10px 15px;
    flex-direction: column;
    gap: 15px;
  }
  
  .navbar-brand h1 {
    font-size: 20px;
  }
  
  .content {
    padding: 20px 15px;
  }
  
  .welcome-card {
    padding: 20px;
  }
  
  .welcome-card h2 {
    font-size: 24px;
  }
  
  .quick-stats {
    grid-template-columns: 1fr;
  }
  
  .modules-grid {
    grid-template-columns: 1fr;
  }
  
  .announcement-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .announcement-date {
    margin-right: 0;
  }
}
</style>